"use client"
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
import {Input} from "@/components/ui/input";
import {Button} from "@/components/ui/button";
import {Textarea} from "@/components/ui/textarea";
import {redirect, useRouter} from "next/navigation";
import {useActionState} from "react";
import {ActionState} from "@/lib/zod/types";
import {createRole} from "@/lib/action/role";
import {z} from "zod";
import {CreateRoleFormSchema} from "@/lib/zod/schema";


export default function Page() {
    const router = useRouter();
    const [state, action, isPending] = useActionState<ActionState<z.infer<typeof CreateRoleFormSchema>>, FormData>(createRole, {
        code: 0,
        msg: ""
    });
    if(state.code ===403){
        return redirect("/login");
    }

    if(state.code ===200){
        return redirect("/home/role");
    }

    return (
        <form action={action}>
            <div className={"flex items-center justify-center h-dvh"}>
                <Card className={"w-80"}>
                    <CardHeader>
                        <CardTitle>新建角色</CardTitle>
                    </CardHeader>
                    <CardContent className={" flex flex-col w-full p-2 gap-2"}>
                        <div className={"flex flex-col items-start"}>
                            <Input id={"role_name"} name={"roleName"} placeholder={"角色名"}
                                   defaultValue={state.input?.roleName}/>
                            {state.errors?.roleName && <p className={"text-red-500 text-sm"}>{state.errors?.roleName?.join("、")}</p>}
                        </div>
                        <div  className={"flex flex-col items-start"}>
                            <Input id={"role_code"} name={"roleCode"} placeholder={"角色编码"}
                                   defaultValue={state.input?.roleCode}/>
                            {state.errors?.roleCode && <p className={"text-red-500 text-sm"}>{state.errors?.roleCode?.join("、")}</p>}

                        </div>
                        <div  className={"flex flex-col items-start h-36"}>
                            <Textarea id={"role_detail"} name={"detail"} className={"h-full"} placeholder={"详情说明"}
                                      defaultValue={state.input?.detail}/>
                            {state.errors?.detail && <p className={"text-red-500 text-sm"}>{state.errors?.detail?.join("、")}</p>}
                        </div>
                        <p className={"text-red-500 text-sm text-right"}>{state.code===402 && state.msg}</p>
                        <div className={"flex justify-around"}>
                            <Button variant={"outline"} size={"sm"} type={"submit"} disabled={isPending}>{isPending ? "提交中" : "提交"}</Button>
                            <Button variant={"outline"} size={"sm"} type={"button"} onClick={()=>{
                                router.push("/home/role")
                            }}>返回</Button>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </form>
    );
}
